<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/classify.css">
    <title>分类</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <!-- 头部占位容器 -->
        <div class="hd-placeholder"></div>
        <div class="top">
            <div class="Back">
                <h1>Back</h1>
            </div>
            <div class="classify">
                <h2>分类</h2>
            </div>
            <div class="city">
                <select name="city" id="" size="1">
                    <option value="gz" selected>广州市</option>
                    <option value="sz">深圳市</option>
                    <option value="zs">中山市</option>
                    <option value="dg">东莞市</option>
                </select>
            </div>
        </div>
        <!-- 分类列表 -->
        <div class="bottom">
            <ul class="bt-list">
                <li>
                    <a href=""></a>
                    <a href=""><h2>美食</h2></a>
                </li>
                <li>
                    <a href=""></a>
                    <a href=""><h2>电影</h2></a>
                </li>
                <li>
                    <a href=""></a>
                    <a href=""><h2>运动</h2></a>
                </li>
                <li>
                    <a href=""></a>
                    <a href=""><h2>唱歌</h2></a>
                </li>
            </ul>
            <!-- 按钮 -->
            <div class="bt-button">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </header>
    <!-- 主体内容 -->
    <section>
        <!-- 美食类 -->
        <div class="cate">
            <!-- 更多 -->
            <div class="more">
                <div class="left">
                    <img src="./image/classify/图层-9.png" alt="">
                    <a href="#"><h2>美食类</h2></a>
                </div>
                <div class="right">
                    <a href="#">
                        <span>更多</span>
                        <img src="./image/index/更多.png" alt="">
                    </a>
                </div>
            </div>
            <!-- 图片列表 -->
            <ul class="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 运动类 -->
        <div class="exercise">
            <!-- 更多 -->
            <div class="more">
                <div class="left">
                    <img src="./image/classify/图层-72.png" alt="">
                    <a href="#"><h2>运动类</h2></a>
                </div>
                <div class="right">
                    <a href="#">
                        <span>更多</span>
                        <img src="./image/index/更多.png" alt="">
                    </a>
                </div>
            </div>
            <!-- 图片列表 -->
            <ul class="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 电影类 -->
        <div class="film">
            <!-- 更多 -->
            <div class="more">
                <div class="left">
                    <img src="./image/classify/图层-81.png" alt="">
                    <a href="#"><h2>电影类</h2></a>
                </div>
                <div class="right">
                    <a href="#">
                        <span>更多</span>
                        <img src="./image/index/更多.png" alt="">
                    </a>
                </div>
            </div>
            <!-- 图片列表 -->
            <ul class="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </section>
    <!-- 页脚导航栏 -->
    <footer>
        <div class="ft-placeholder"></div>
        <div class="nav">
            <a href="./index.html">
                <img src="./image/discover/首页1.png" alt="">
                <span>首页</span>
            </a>
            <a href="./classify.html">
                <img src="./image/classify/分类41.png" alt="">
                <span>分类</span>
            </a>
            <a href="./discover.html">
                <img src="./image/index/广场.png" alt="">
                <span>发现</span>
            </a>
            <a href="./my.html">
                <img src="./image/index/我的.png" alt="">
                <span>我的</span>
            </a>
        </div>
    </footer>
</body>
</html>